<template>
  <div>
    <!-- 用户 -->
    <div class="user" @click="login">
      <div class="left">
        <span>登陆/开通</span><br />
        <p>登陆后享受更多金融服务</p>
      </div>
      <div class="right">
        <div><img src="wodeimg/1.jpg" /></div>
        <div class="iconfont icon-arrow-right-copy"></div>
      </div>
    </div>
    <!-- 会员 -->
    <div class="img" @click="hui">
      <img src="wodeimg/2.jpg" />
    </div>
    <!-- 主体 -->
    <main>
      <!-- 权益中心 -->
      <div class="rights">
        <div class="cen">
          <div class="xin">权益中心</div>
          <div class="duo" @click="she">
            <span>更多</span>
            <div class="iconfont icon-arrow-right-copy"></div>
          </div>
        </div>
        <div class="ter">
          <div>
            <div class="center">--</div>
            <span>我的积分</span>
          </div>
          <div>
            <div class="center">0</div>
            <span>我的卡券</span>
          </div>
          <div>
            <div class="center">--</div>
            <span>信用卡权益</span>
          </div>
          <div>
            <div class="center">0</div>
            <span>已报名活动</span>
          </div>
        </div>
      </div>
      <!-- 精选服务 -->
      <div class="select">
        <div class="xin jing">精选服务</div>
        <van-grid>
          <van-grid-item
            icon="wodeimg/xiaotu/yi.jpg"
            text="一件绑卡"
            @click="bang"
          />
          <van-grid-item
            icon="wodeimg/xiaotu/wei.jpg"
            text="微应用"
            @click="wei"
          />
          <van-grid-item
            icon="wodeimg/xiaotu/an.jpg"
            text="安全中心"
            @click="anquan"
          />
          <van-grid-item icon="wodeimg/xiaotu/fa.jpg" text="发现" @click="fa" />
        </van-grid>
      </div>
      <!-- 安全验证 -->
      <div class="select">
        <div class="xin jing">安全验证</div>
        <van-grid>
          <van-grid-item
            icon="wodeimg/xiaotu/zhi.jpg"
            text="指纹"
            @click="shua"
          />
          <van-grid-item
            icon="wodeimg/xiaotu/kuai.jpg"
            text="网证"
            @click="she"
          />
        </van-grid>
      </div>
      <!-- 授权管理 -->
      <div class="select">
        <div class="xin jing">授权管理</div>
        <van-grid>
          <van-grid-item
            icon="wodeimg/xiaotu/bang.jpg"
            text="绑定设备"
            @click="bang"
          />
          <van-grid-item icon="wodeimg/xiaotu/kuai.jpg" text="快捷支付" />
          <van-grid-item icon="wodeimg/xiaotu/weixin.jpg" text="微信绑定" />
        </van-grid>
      </div>
      <!-- 其他 -->
      <div class="select">
        <div class="xin jing">其他</div>
        <van-grid>
          <van-grid-item icon="wodeimg/xiaotu/shou.jpg" text="收货地址" />
          <van-grid-item icon="wodeimg/xiaotu/tou.jpg" text="发票抬头" />
          <van-grid-item icon="wodeimg/xiaotu/jian.jpg" text="证件" />
        </van-grid>
        <div class="select">
          <div class="xin jing"></div>
          <van-grid>
            <!-- <van-grid-item icon="wodeimg/xiaotu/shou.jpg" text="收货地址" />
            <van-grid-item icon="wodeimg/xiaotu/tou.jpg" text="发票抬头" />
            <van-grid-item icon="wodeimg/xiaotu/jian.jpg" text="证件" /> -->
          </van-grid>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
    };
  },
  mounted() {
    this.$store.dispatch("LINK_DATA", { url: "/" });
  },
  computed: {
    newobj() {
      return this.$store.state.actionsm.listobj;
    },
  },
  methods: {
    login() {
      this.$router.push({
        path: "/WoView",
      });
    },
    wei() {
      this.$router.push({
        path: "/WeiView",
      });
    },
    she() {
      this.$router.push({
        path: "/SheView",
      });
    },
    hui() {
      this.$router.push({
        path: "/HuiView",
      });
    },
    anquan() {
      this.$router.push({
        path: "/AnquanView",
      });
    },
    fa() {
      this.$router.push({
        path: "/FaView",
      });
    },
    shua() {
      this.$router.push({
        path: "/ShuaView",
      });
    },
    bang() {
      this.$router.push({
        path: "/BangView",
      });
    },
  },
};
</script>

<style scoped>
/* 用户 */
.user {
  font-size: 0.16rem;
  width: 100%;
  height: 0.7rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.left > span {
  font-size: 0.2rem;
}
.left > p {
  font-size: 0.12rem;
  color: #b0aeb1;
}
.right {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 权益中心 */
main {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.rights {
  width: 90%;
}
.rights > .cen {
  height: 0.42rem;
  display: flex;
  justify-content: space-between;
}
.xin {
  font-size: 0.18rem;
}
.rights .cen .duo {
  font-size: 0.14rem;
  color: #b0aeb1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rights .ter {
  height: 0.68rem;
  background-color: #2b60ad;
  border-radius: 2%;
  font-size: 0.14rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.rights .ter .center {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.select {
  width: 90%;
  height: 1.56rem;
  font-size: 0.14rem;
  /* display: flex; */
}
.jing {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}
.img {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 0.16rem;
  margin-top: 0.1rem;
}
.img > img {
  width: 90%;
}
</style>